<template>
  <div id="box">
    <!-- <heade></heade> -->
        <!-- 列表开始 -->
          <div class="product" v-for="(item,index) in product_list.doc" :key="index">
            <router-link :to="{path:'/detail',query:{id:item._id,name:id}}">
              <router-link to="/" class="name">
                <div class="name_img">
                  <img :src="'http://drcy.wyx.ac.cn/'+product_list.name[index].heade_img" alt="">
                </div>
                <div class="info">
                  <p>{{product_list.name[index].name}}</p>
                  <!-- <p>{{item.createTime}}</p> -->
                </div>
              </router-link>
              <div class="content">
                <p>{{item.text}}</p>
                <div class="content_img" v-if="item.imgPath.length!=0">
                  <div class="img_zhu">
                    <img :src="'http://drcy.wyx.ac.cn/'+item.imgPath[0]" alt="">
                  </div>
                  <!-- <div class="img_fu" v-if="item.imgPath.length>1">
                    <div v-for="(item1,index) in item.imgPath" :key="index">
                      <img :src="'http://drcy.wyx.ac.cn/'+item1" alt=""  v-if="index!=0&&index<3">
                    </div>
                  </div> -->
                </div>
                <div v-else>
                    <video :src="'http://drcy.wyx.ac.cn/'+item.videoPath" style="width:100%" controls="controls"></video>
                </div>
              </div>
            </router-link>
          </div>
          <!-- 列表结束 -->
          <infinite-loading @infinite="infiniteHandler">
            <span slot="no-more">
              我们是有底线的
            </span>
          </infinite-loading>
    <foter></foter>
  </div>
</template>

<script>; 
import heade from '@/components/header.vue'
import foter from '@/components/footer.vue'
import InfiniteLoading from 'vue-infinite-loading';
import axios from 'axios'
import Cookies from 'js-cookie'
import moment from 'moment'

export default {
  data () {
    return {
      list: [],
      page:0,//翻页
      show:true,
      text_show:false,
      product_list:{},
      userName:this.$store.state.userName,
      id:0//查询标识
    }
  },
  created(){
    this.addUserName();
    this.getAll();
  },
  components:{
    heade,
    foter,
    InfiniteLoading
  },
  methods:{
      addUserName(){
        let userName=Cookies.get("userName")
        this.$store.commit("addUser",userName)
      },

      getAll(){
        axios.get('http://localhost:3000/findAll',
          {
            params:{
              page:this.page,
              id:this.id
            }
          }
        ).then(res=>{
          let response=res.data;
          if(response.status==200){
            this.product_list=response.res;
            this.product_list.doc.forEach(item=>{
              item.createTime=moment(item.createTime).format("YYYY-MM-DD hh:mm:ss")
            })
          }else{
            console.log("123")
          }
        })
      },
     
        infiniteHandler($state) {
          axios.get('http://localhost:3000/findAll',{ 
            params:{
              page:++this.page,
              id:this.id
            }
          }).then(res=>{
            const response=res.data;
            if(response.status==200&&this.product_list!=undefined){
              this.product_list.doc.push(...response.res.doc)
              this.product_list.name.push(...response.res.name)
              this.product_list.doc.forEach(item=>{
                item.createTime=moment(item.createTime).format("YYYY-MM-DD hh:mm:ss")
              })
              $state.loaded();
              
            }
            if(response.res.doc.length<10){
              this.show=false;
              this.text_show=true;
              $state.complete();
            }
          })
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#header{
    background: #ffff;
    padding: .5em;
    color: #fff;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-bottom: 1px solid #eae7e7;
}

#box{
  width: 100%;
  height: 100%;
  background: #f3f3f3;
  padding-bottom: 5em;
}
.product{
  width: 100%;
  background: #fff;
  border-bottom: 1px solid #e4dbdb;
  margin-bottom: .5em;
}
  .name{
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    padding-left: .5em;
  }
  .name>.info{
    width: 80%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .name>.info>p:last-child{
    font-size: .5em;
    color: #565656;
  }
  .name>.name_img{
    width: 10%;
    border-radius: 5px;
    overflow: hidden;
    margin-right: 10px;
  }
  .name>.name_img>img{
    width: 100%;
    height: 100%;
  }
  .content{
    padding: .5em;
  }
  .content_img{
    width: 100%;
    display: flex;
  }
  .content_img>.img_zhu{
    width: 100%;
  }
  .content_img>.img_zhu>img{
    width: 100%;
    height: 100%;
  }
  
</style>
